<template>
	<view class="Logon">
		<view class="logon-backs"></view>
		<view class="describe">
			<view :style="`height:${barHeight}rpx`"></view>
			<image class="icon" src="@/static/icon/gs.png" mode=""></image>
			<view class="title color0">您好 欢迎使用</view>
			<view class="descs color9">精准触达更省时，业绩冲刺稳攀升</view>
		</view>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<up-form labelPosition="left" :model="state.userInfo" :rules="state.rules" ref="uFormRef">
			<up-form-item prop="phone" borderBottom ref="item1">
				<view class="dis">
					<image class="info" src="@/static/icon/yh.png" mode=""></image>
				</view>
				<up-input type="number" clearable v-model="state.userInfo.phone" border="none" maxlength="11"
					placeholder="请输入手机号"></up-input>
			</up-form-item>
			<up-form-item prop="password" borderBottom ref="item1">
				<image class="icons" src="@/static/icon/mm.png" mode=""></image>
				<up-input :password="passBool" clearable v-model="state.userInfo.password" border="none"
					placeholder="请输入密码">
					<template #suffix>
						<image class="password" @click="passBool = true" src="@/static/icon/yc.png" mode=""
							v-if="!passBool"></image>
						<image class="password" @click="passBool = false" src="@/static/icon/xs.png" mode="" v-else>
						</image>
					</template>
				</up-input>
			</up-form-item>
			<view class="other color" @click="onPrompt(1)">忘记密码？</view>
			<up-button @click="submit" class="logon">登录</up-button>
			<view class="register" @click="onPrompt(1)" :hoverStopPropagation="false">注册</view>
			<!-- <up-button @click="autoCall(1234654)" class="logon">测试按钮外呼</up-button> -->
			<view class="agreement size-26">
				<!-- 				<up-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
					<up-radio
						:customStyle="{ marginBottom: '8px' }"
						v-for="(item, index) in radiolist1"
						:key="index"
						:label="item.name"
						:name="item.name"
						@change="radioChange"
					></up-radio>
				</up-radio-group> -->
				阅读并同意
				<text class="color" @click="onPrompt(2)">《用户协议》</text>
				登录默认已阅读
			</view>
		</up-form>
	</view>
</template>
<script setup>
	import { onShow } from '@dcloudio/uni-app';
	import { ref, reactive, onMounted } from 'vue';
	import { Login } from '@/http/api/index'
	// 初始化
	const barHeight = ref(0);
	const uFormRef = ref(null); // 表单校验初始化
	const passBool = ref(true); // 密码是否显示初始化
	// 使用 reactive 创建响应式状态
	const state = ref({
		userInfo: {
			phone: '19999999999', // 账号
			password: '123456', // 密码
			is_call: false,
		},
		rules: {
			phone: {
				required: true,
				message: '请输入手机号码',
				// blur和change事件触发检验
				trigger: ['blur', 'change']
			},
			password: {
				required: true,
				message: '请填写密码',
				trigger: ['blur', 'change']
			}
		}
	});
	// 应用层
	// const autoCall = (phoneNumber) => {
	// 	// 安卓平台判断
	// 	if (uni.getSystemInfoSync().platform === 'android') {
	// 		const main = plus.android.runtimeMainActivity();
	// 		const Intent = plus.android.importClass('android.content.Intent');
	// 		const Uri = plus.android.importClass('android.net.Uri');

	// 		// 创建拨号Intent
	// 		const intent = new Intent(Intent.ACTION_CALL);
	// 		intent.setData(Uri.parse('tel:' + phoneNumber));

	// 		// 动态申请权限
	// 		const permission = 'android.permission.CALL_PHONE';
	// 		main.requestPermissions([permission], 0);

	// 		// 执行拨号（需处理权限回调）
	// 		main.startActivity(intent);
	// 	} else {
	// 		uni.showToast({ title: '仅支持安卓平台' });
	// 	}
	// };
	barHeight.value = uni.getStorageSync('bar_height'); // 设备的高度
	// 点击提示用户
	const onPrompt = (index) => {
		const tis = { 1: '请联系您的上级领导', 2: '内部系统，协议正在完善' };
		uni.showToast({
			title: tis[index],
			duration: 2000,
			icon: 'none'
		});
	};
	const submit = () => {
		uFormRef.value
			.validate()
			.then((valid) => {
				if (valid) redirected();
				// else uni.$u.toast('请填写手机号和密码');
			})
			.catch(() => {
				// 处理验证错误
				// uni.$u.toast('请填写手机号和密码');
			});
	};
	// 登录成功跳转
	const redirected = async (valid) => {
		const { data, code } = await Login(state.value.userInfo)
		if (code == 200) {
			console.log('data', data.token)
			uni.setStorageSync('token', data.token);
			// uni.setStorageSync('userInfo', state.value.userInfo.phone);
			uni.setStorageSync('dialing', true)
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}
	};
	// 初始化 WebSocket
	onShow(async () => {
		state.value.userInfo.is_call = await checkAndroidPhonePermission();
	})
	const checkAndroidPhonePermission = () => {
		return new Promise((resolve) => {
			// 条件编译：仅Android App生效
			// #ifdef APP-PLUS && ANDROID
			const main = plus.android.runtimeMainActivity();
			const Permission = plus.android.importClass('android.Manifest$permission');
			const permission = Permission.CALL_PHONE;

			// 检查当前权限
			const hasPerm = main.checkSelfPermission(permission) === main.PERMISSION_GRANTED;
			if (hasPerm) {
				resolve(true);
				return;
			}

			// 请求权限
			main.requestPermissions([permission], 0, (reqCode, permissions, grantResults) => {
				resolve(grantResults[0] === main.PERMISSION_GRANTED);
			});
			// #else
			resolve(true); // 非Android环境直接通过
			// #endif
		});
	}
	// 自动拨打
	const autoCall = (phoneNumber) => {
		// 安卓平台判断
		if (uni.getSystemInfoSync().platform === 'android') {
			const main = plus.android.runtimeMainActivity();
			const Intent = plus.android.importClass('android.content.Intent');
			const Uri = plus.android.importClass('android.net.Uri');

			// 创建拨号Intent
			const intent = new Intent(Intent.ACTION_CALL);
			intent.setData(Uri.parse('tel:' + phoneNumber));

			// 动态申请权限
			const permission = 'android.permission.CALL_PHONE';
			main.requestPermissions([permission], 0);

			// 执行拨号（需处理权限回调）
			main.startActivity(intent);
		} else {
			uni.showToast({ title: '仅支持安卓平台' });
		}
	}
</script>

<style lang="scss" scoped>
	.Logon {
		.logon-backs {
			width: 100%;
			height: 280rpx;
			background: linear-gradient(180deg, rgba(36, 113, 251, 0.1) 0%, rgba(36, 113, 251, 0.05) 60%, rgba(36, 113, 251, 0) 100%);
		}

		.describe {
			padding: 0 80rpx;
			margin-top: -160rpx;

			.icon {
				width: 120rpx;
				height: 120rpx;
				padding: 24rpx;
				margin-bottom: 24rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				background: rgba(36, 113, 251, 0.1);
			}

			.title {
				font-size: 48rpx;
				margin-bottom: 12rpx;
			}

			.descs {
				font-size: 28rpx;
			}
		}

		// 表单样式
		:deep(.u-form) {
			padding: 50rpx 80rpx 0;

			.u-form-item__body {
				padding: 0;

				.uni-input-input,
				.u-input__content__field-wrapper__field {
					height: 100rpx;
				}
			}

			.password {
				width: 30rpx;
				height: 30rpx;
				display: block;
				opacity: 0.5;
			}

			.iconfont {
				margin-right: 25rpx;
			}

			.u-form-item__body__right {
				background: #f4f5f7;
				padding: 0 25rpx;
				margin-bottom: 10rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
			}

			.u-form-item__body__right__message {
				margin-left: 0 !important;
			}

			.u-form-item {
				margin-bottom: 30rpx;
			}

			.logon {
				border: 0;
				background: #2471fb;
				margin-top: 50rpx;
				height: 100rpx;
				font-size: 34rpx;
				color: #ffffff;
			}

			.register {
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				background: rgba(0, 0, 0, 0);
				color: #2471fb;
				border: 0;
				font-size: 30rpx;
			}

			.other {
				text-align: right;
				font-size: 30rpx;
			}

			.agreement {
				display: flex;
				align-items: center;
				justify-content: center;
				position: fixed;
				width: 100%;
				left: 0;
				bottom: 100rpx;
			}

			.icons {
				width: 38rpx;
				height: 38rpx;
				margin-right: 10rpx;
			}

			.info {
				width: 36rpx;
				height: 36rpx;
				margin-right: 12rpx;
			}
		}
	}
</style>